<template>
    <div class="humidity-trend container-bottom-20">
        <CardBox title="参数对比"></CardBox>
        <div class="content-container content-container-height-262">
            <div ref="chartRef" class="chart-container" style="width: 100%; height: 100%;"></div>
        </div>
    </div>
</template>

<script>
import CardBox from '@/components/Global/CardBox.vue'
import * as echarts from 'echarts'
import {EventBus} from "../../utils/event-bus";
import axios from "axios"
export default {
    name: 'WeatherCompare',
    components: {
        CardBox
    },
    data() {
        return {
            color:['#3B7EFF','#00FFE3','#9890FF','#50C32D','#B38611','#DBAF86','#3B7EFF','#00FFE3'],
            type:"qixiang",
            params:{
                start_date:"2025-04-07",
                end_date:"2025-05-07",
                varNameList:["气温_℃","总辐射_W/m2"],
                deviceId:null
            },
            varNameList:{
                kongqi:["气温_℃","总辐射_W/m2"],
                turang:["vwc20cmAvg","rainTot"]
            },
            chart: null
        }
    },
    mounted() {
    },
    created() {
        EventBus.$on('set-biological-device-type', (message) => {
            this.type = message;
        });
        EventBus.$on('sent-device-id-to-right', (message) => {
            const currentDate = new Date();
            const year = currentDate.getFullYear();
            const month = currentDate.getMonth() + 1; // 月份从0开始，需要加1
            const day = currentDate.getDate();
            const hours = String(currentDate.getHours()).padStart(2, '0');
            const minutes = String(currentDate.getMinutes()).padStart(2, '0');
            const seconds = String(currentDate.getSeconds()).padStart(2, '0');
            const today=`${year}-${month}-${day} ${
                hours}:${
                minutes}:${
                seconds}`;
            const lastDay=`${year}-${month}-${day-1} ${
                hours}:${
                minutes}:${
                seconds}`;
            this.params.start_date=lastDay;
            this.params.end_date=today;
            this.params.deviceId = message.id;
            this.getData();
        })
    },
    beforeDestroy() {
        if (this.chart) {
            this.chart.dispose()
        }
    },
    methods: {
        getData(){
            this.params.varNameList=this.varNameList[this.type];
            this.$api.environment.getVarList(this.type,this.params).then(res => {
                this.initChart(res);
            });
        },
        initChart(data) {
            this.chart = echarts.init(this.$refs.chartRef)
            let series = [];
            let y = [];
            for (let i = 0; i < data.legends.length; i++) {
                series.push( {
                    name: data.legends[i],
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 8,
                    yAxisIndex: i,
                    data: data.yDatas[i],
                    lineStyle: {
                        color: this.color[i]
                    },
                    itemStyle: {
                        color: this.color[i],
                        fontFamily: 'DIN Pro'
                    }
                });
                y.push( {
                    type: 'value',
                    scale: true,
                    position: i==0?'left':'right',
                    offset: i>1?30*(i-1):0,  // 偏移量，避免重叠
                    splitLine: i==0?{
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(255, 255, 255, 0.2)'
                        }
                    }:{show: false},
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        color: '#ffffff',
                        fontFamily: 'DIN Pro'
                    }
                });
            }


            const option = {
                grid: {
                    top: '15%',
                    left: '3%',
                    right: '4%',
                    bottom: '8%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(0,24,106,0.8)',
                    borderColor: 'rgba(0,150,255,0.3)',
                    textStyle: {
                        color: '#fff'
                    }
                },
                legend: {
                    data: data.legends,
                    textStyle: {
                        color: '#ffffff',
                        fontFamily: 'DIN Pro'
                    },
                    top: '5%'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: data.xDatas,
                    axisLine: {
                        lineStyle: {
                            color: '#ffffff'
                        }
                    },
                    axisLabel: {
                        color: '#ffffff',
                        fontFamily: 'DIN Pro'
                    }
                },
                yAxis:y,
                series: series
            }
            
            this.chart.setOption(option)
            
            // 监听窗口大小变化，重绘图表
            window.addEventListener('resize', () => {
                this.chart.resize()
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.humidity-trend {
}
</style>

